<!doctype html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端,React,flux," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />






<meta name="description" content="本文所有代码可以在Github上查看。react-flux-demo
新建React项目既然有兴趣打开本文，说明你对React的基本开发应该有所了解。我们教程的第一步就是创建一个新的React项目。我们可以使用一些React Boilerplate项目方便的创建一个新的React项目，比如我之前创建的React Boilerplate：
react_boilerplate
该React Boile">
<meta property="og:type" content="article">
<meta property="og:title" content="手把手教你玩转 React Flux">
<meta property="og:url" content="http://jiji262.github.io/2016/11/28/introduction-to-react-flux/index.html">
<meta property="og:site_name" content="令狐葱@前端笔记">
<meta property="og:description" content="本文所有代码可以在Github上查看。react-flux-demo
新建React项目既然有兴趣打开本文，说明你对React的基本开发应该有所了解。我们教程的第一步就是创建一个新的React项目。我们可以使用一些React Boilerplate项目方便的创建一个新的React项目，比如我之前创建的React Boilerplate：
react_boilerplate
该React Boile">
<meta property="og:image" content="https://github.com/facebook/flux/raw/master/docs/img/flux-diagram-white-background.png">
<meta property="og:updated_time" content="2017-02-20T06:52:13.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="手把手教你玩转 React Flux">
<meta name="twitter:description" content="本文所有代码可以在Github上查看。react-flux-demo
新建React项目既然有兴趣打开本文，说明你对React的基本开发应该有所了解。我们教程的第一步就是创建一个新的React项目。我们可以使用一些React Boilerplate项目方便的创建一个新的React项目，比如我之前创建的React Boilerplate：
react_boilerplate
该React Boile">
<meta name="twitter:image" content="https://github.com/facebook/flux/raw/master/docs/img/flux-diagram-white-background.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"post","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://jiji262.github.io/2016/11/28/introduction-to-react-flux/"/>





  <title> 手把手教你玩转 React Flux | 令狐葱@前端笔记 </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0fd825270d7f51597f963010828c65b8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>










  
  
    
  

  <div class="container one-collumn sidebar-position-post page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">令狐葱@前端笔记</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
    
      <p class="site-subtitle"></p>
    
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="http://jiji262.github.io/2016/11/28/introduction-to-react-flux/">

  <span style="display:none" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="令狐葱">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/images/avatar.gif">
  </span>

  <span style="display:none" itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="令狐葱@前端笔记">
    <span style="display:none" itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="令狐葱@前端笔记" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                手把手教你玩转 React Flux
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2016-11-28T20:10:00+08:00">
                2016-11-28
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2016/11/28/introduction-to-react-flux/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2016/11/28/introduction-to-react-flux/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>本文所有代码可以在Github上查看。<br><a href="https://github.com/jiji262/react-flux-demo" target="_blank" rel="external">react-flux-demo</a></p>
<h1 id="新建React项目"><a href="#新建React项目" class="headerlink" title="新建React项目"></a>新建React项目</h1><p>既然有兴趣打开本文，说明你对React的基本开发应该有所了解。我们教程的第一步就是创建一个新的React项目。我们可以使用一些React Boilerplate项目方便的创建一个新的React项目，比如我之前创建的React Boilerplate：</p>
<p><a href="https://github.com/jiji262/react_boilerplate" target="_blank" rel="external">react_boilerplate</a></p>
<p>该React Boilerplate的实现过程，可以参考我之前的文章<a href="http://jiji262.github.io/2016/04/29/create-your-own-react-boilerplate/">手把手教你基于ES6架构自己的React Boilerplate项目</a>。</p>
<p>或者，也可以使用facebook最新推出的一个类似项目：</p>
<p><a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="external">create-react-app</a></p>
<p>我们这里使用<code>facebookincubator/create-react-app</code>:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">npm install -g create-react-app</div><div class="line"></div><div class="line">create-react-app todoApp</div><div class="line">cd todoApp/</div><div class="line">npm start</div></pre></td></tr></table></figure>
<p>然后我们就可以通过访问<code>http://localhost:3000/</code>来查看结果了。</p>
<h1 id="使用React实现简单的Todo程序（不带flux）"><a href="#使用React实现简单的Todo程序（不带flux）" class="headerlink" title="使用React实现简单的Todo程序（不带flux）"></a>使用React实现简单的Todo程序（不带flux）</h1><p>我们要实现一个简单的todo程序，可以添加、删除todo条目。</p>
<h2 id="ListContainer-组件"><a href="#ListContainer-组件" class="headerlink" title="ListContainer 组件"></a>ListContainer 组件</h2><p>首先我们需要一个container用于放置todo列表，命名为<code>ListContainer.js</code>，其内容如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">ListContainer</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  state = &#123;</div><div class="line">    list: []</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  handleAddItem = (newItem) =&gt; &#123;</div><div class="line">    <span class="keyword">var</span> list = <span class="keyword">this</span>.state.list;</div><div class="line">    list.push(newItem);</div><div class="line">    <span class="keyword">this</span>.setState(&#123;</div><div class="line">      list: list</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  handleRemoveItem = (index) =&gt; &#123;</div><div class="line">   <span class="keyword">this</span>.state.list.splice(index, <span class="number">1</span>);</div><div class="line">    <span class="keyword">this</span>.setState(&#123;</div><div class="line">      list: <span class="keyword">this</span>.state.list</div><div class="line">    &#125;);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render = () =&gt; &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;div className="col-sm-6 col-md-offset-3"&gt;</div><div class="line">        &lt;div className="col-sm-12"&gt;</div><div class="line">          &lt;h3 className="text-center"&gt; Todo List &lt;/h3&gt;</div><div class="line">          &lt;AddItem add=&#123;this.handleAddItem&#125;/&gt;</div><div class="line">          &lt;List items=&#123;this.state.list&#125; remove=&#123;this.handleRemoveItem&#125;/&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    )</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p><code>render</code>函数中来组建dom元素显示todo列表，其中<code>AddItem</code>组件是用来新建todo的，<code>List</code>组件用于显示todo列表项。</p>
<p>在两个响应函数<code>handleAddItem</code>及<code>handleRemoveItem</code>中，通过<code>setState</code>函数来管理state。</p>
<h2 id="List-组件"><a href="#List-组件" class="headerlink" title="List 组件"></a>List 组件</h2><p>todo列表项显示组件内容如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">List</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  <span class="keyword">static</span> defaultProps = &#123;</div><div class="line">          items: [],</div><div class="line">          remove: () =&gt; &#123;&#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  <span class="keyword">static</span> propTypes = &#123;</div><div class="line">      items: React.PropTypes.array.isRequired,</div><div class="line">      remove: React.PropTypes.func.isRequired</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render = () =&gt; &#123;</div><div class="line">    <span class="keyword">var</span> styles = &#123;</div><div class="line">      uList: &#123;</div><div class="line">        paddingLeft: <span class="number">0</span>,</div><div class="line">        listStyleType: <span class="string">"none"</span></div><div class="line">      &#125;,</div><div class="line">      listGroup: &#123;</div><div class="line">        margin: <span class="string">'5px 0'</span>,</div><div class="line">        borderRadius: <span class="number">5</span></div><div class="line">      &#125;,</div><div class="line">      removeItem: &#123;</div><div class="line">        fontSize: <span class="number">20</span>,</div><div class="line">        float: <span class="string">"left"</span>,</div><div class="line">        position: <span class="string">"absolute"</span>,</div><div class="line">        top: <span class="number">12</span>,</div><div class="line">        left: <span class="number">6</span>,</div><div class="line">        cursor: <span class="string">"pointer"</span>,</div><div class="line">        color: <span class="string">"rgb(222, 79, 79)"</span></div><div class="line">      &#125;,</div><div class="line">      todoItem: &#123;</div><div class="line">        paddingLeft: <span class="number">20</span>,</div><div class="line">        fontSize: <span class="number">17</span></div><div class="line">      &#125;</div><div class="line">    &#125;;</div><div class="line">    <span class="keyword">var</span> listItems = <span class="keyword">this</span>.props.items.map(<span class="function"><span class="keyword">function</span>(<span class="params">item, index</span>)</span>&#123;</div><div class="line">      <span class="keyword">return</span> (</div><div class="line">        <span class="xml"><span class="tag">&lt;<span class="name">li</span> <span class="attr">key</span>=<span class="string">&#123;index&#125;</span> <span class="attr">className</span>=<span class="string">"list-group-item"</span> <span class="attr">style</span>=<span class="string">&#123;styles.listGroup&#125;</span>&gt;</span></span></div><div class="line">          <span class="tag">&lt;<span class="name">span</span></span></div><div class="line">            <span class="attr">className</span>=<span class="string">"glyphicon glyphicon-remove"</span></div><div class="line">            <span class="attr">style</span>=<span class="string">&#123;styles.removeItem&#125;</span></div><div class="line">            <span class="attr">onClick</span>=<span class="string">&#123;this.props.remove.bind(null,</span> <span class="attr">index</span>)&#125;&gt;</div><div class="line">          <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&#123;styles.todoItem&#125;</span>&gt;</span></div><div class="line">            &#123;item&#125;</div><div class="line">          <span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">      )</div><div class="line">    &#125;.bind(<span class="keyword">this</span>));</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      <span class="xml"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">style</span>=<span class="string">&#123;styles.uList&#125;</span>&gt;</span></span></div><div class="line">        &#123;listItems&#125;</div><div class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">    )</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>其中用于删除的图标上的<code>onClick</code>事件会调用父级组件响应的方法，完成删除操作</p>
<h2 id="AddItem-组件"><a href="#AddItem-组件" class="headerlink" title="AddItem 组件"></a>AddItem 组件</h2><p>添加新的todo项的组件<code>AddItem.js</code>内容如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">AddItem</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  <span class="keyword">static</span> defaultProps = &#123;</div><div class="line">          add: () =&gt; &#123;&#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  <span class="keyword">static</span> propTypes = &#123;</div><div class="line">      add: React.PropTypes.func.isRequired</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  handleSubmit = (e) =&gt; &#123;</div><div class="line">    <span class="keyword">if</span>(e.keyCode === <span class="number">13</span>)&#123;</div><div class="line">      <span class="keyword">var</span> newItem = <span class="keyword">this</span>.myTextInput.value;</div><div class="line">      <span class="keyword">this</span>.myTextInput.value = <span class="string">''</span>;</div><div class="line">      <span class="keyword">this</span>.props.add(newItem);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render = () =&gt; &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">ref</span>=<span class="string">&#123;(ref)</span> =&gt;</span> this.myTextInput = ref&#125; className="form-control" placeholder="New Item" onKeyDown=&#123;this.handleSubmit&#125;  /&gt;</div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    )</div><div class="line">  &#125;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p><code>onKeyDown</code>函数处理添加事件的提交，会调用父级组件设置的add方法。</p>
<h2 id="App-js"><a href="#App-js" class="headerlink" title="App.js"></a>App.js</h2><p>入口文件<code>App.js</code>中引入<code>ListContainer</code>即可：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  render() &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;div className="App"&gt;</div><div class="line">        &lt;div className="App-header"&gt;</div><div class="line">          &lt;img src=&#123;logo&#125; className="App-logo" alt="logo" /&gt;</div><div class="line">          &lt;h2&gt;Welcome&lt;/h2&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">        &lt;div className="App-intro"&gt;</div><div class="line">          &lt;div className="row"&gt;</div><div class="line">            &lt;ListContainer /&gt;</div><div class="line">          &lt;/div&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>至此，我们可以通过<code>npm start</code>启动应用程序，然后在浏览器中可以通过访问<code>http://localhost:3000/</code>来查看结果了。</p>
<p>具体代码请移步Github：<br><a href="https://github.com/jiji262/react-flux-demo/tree/master/todoApp" target="_blank" rel="external">react-flux-demo/todoApp</a></p>
<h1 id="Flux"><a href="#Flux" class="headerlink" title="Flux"></a>Flux</h1><p>Flux并不是一个库或者框架，可以将其简单的理解为一种软件架构方式。在其官方网站上，其原理图如下：</p>
<p><img src="https://github.com/facebook/flux/raw/master/docs/img/flux-diagram-white-background.png" alt=""></p>
<p>一下子看上去比较晦涩，特别是在其官方文档中，涉及多个新的名词，如Views, Stores, Dispatcher Actions, Action Types, Action Creators如此等等，一下子使其更加难以理解。</p>
<p>但是，真正熟悉之后，你会发现，其实其涉及的核心概念也就下面这么几个：</p>
<p><strong>Actions</strong>：帮助向Dispatcher传递数据的辅助方法；<br><strong>Dispatcher</strong>：接收action，并且向注册的回调函数广播payloads；<br><strong>Stores</strong>：应用程序状态的容器&amp;并且含有注册到Dispatcher的回调函数；<br><strong>Views</strong>：React组件，从Store获取状态，并将其逐级向下传递给子组件。</p>
<p>一个重要的特征是，其实现了一个单向的数据流，用于高效的管理state。这就有效的避免了MVC框架中view和model多对多容易出现的各种问题。关于原理的详细介绍，可以参考文后的链接。</p>
<h2 id="flux架构的实现"><a href="#flux架构的实现" class="headerlink" title="flux架构的实现"></a>flux架构的实现</h2><p>如前所述，Flux是一种架构方式，一种设计思想。因此，Facebook并没有规定其必须如何实现，这也导致其实现版本层出不穷，具体可以参考：</p>
<p><a href="https://github.com/kriasoft/react-starter-kit/issues/22" target="_blank" rel="external">https://github.com/kriasoft/react-starter-kit/issues/22</a></p>
<p>其中最为流行的当属Redux，以后再专文详述。<br>本文使用<a href="https://github.com/facebook/flux" target="_blank" rel="external">Facebook提供的flux版本</a>。</p>
<h1 id="使用flux架构重构Todo程序"><a href="#使用flux架构重构Todo程序" class="headerlink" title="使用flux架构重构Todo程序"></a>使用flux架构重构Todo程序</h1><p>我们将上面实现的React应用简单做些修改，以便理解flux架构的基本概念及设计思想。</p>
<h2 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h2><p>我们将创建独立的目录来保存<code>stores</code>,<code>actions</code>,<code>dispatcher</code>等。目录结构如下：<br><figure class="highlight haml"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">src</div><div class="line">-<span class="ruby">- actions</span></div><div class="line">-<span class="ruby">- constants</span></div><div class="line">-<span class="ruby">- dispatcher</span></div><div class="line">-<span class="ruby">- stores</span></div><div class="line">-<span class="ruby">- components</span></div></pre></td></tr></table></figure></p>
<p>其中<code>constants</code>用于保存一些常量，<code>components</code>就是我们的React组件，对应flux架构中的<code>views</code>。</p>
<h2 id="Constants"><a href="#Constants" class="headerlink" title="Constants"></a>Constants</h2><p><code>constants/appConstants.js</code>内容很简单，创建了两个我们需要在action中用到的常量。代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> appConstants = &#123;</div><div class="line">  ADD_ITEM: <span class="string">"ADD_ITEM"</span>,</div><div class="line">  REMOVE_ITEM: <span class="string">"REMOVE_ITEM"</span></div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> appConstants</div></pre></td></tr></table></figure>
<h2 id="Stores"><a href="#Stores" class="headerlink" title="Stores"></a>Stores</h2><p><code>Stores</code>用于集中管理state的变化。<code>stores/todoStore.js</code>文件内容如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> AppDispatcher <span class="keyword">from</span> <span class="string">'../dispatcher/AppDispatcher'</span>;</div><div class="line"><span class="keyword">import</span> appConstants <span class="keyword">from</span> <span class="string">'../constants/appConstants'</span>;</div><div class="line"><span class="keyword">import</span> &#123;EventEmitter&#125; <span class="keyword">from</span> <span class="string">'events'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> CHANGE_EVENT = <span class="string">'change'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> _store = &#123;</div><div class="line">  list: []</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="keyword">var</span> addItem = <span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</div><div class="line">  _store.list.push(item);</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="keyword">var</span> removeItem = <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">  _store.list.splice(index, <span class="number">1</span>);</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">var</span> todoStore = <span class="built_in">Object</span>.assign(&#123;&#125;, EventEmitter.prototype, &#123;</div><div class="line">  addChangeListener: <span class="function"><span class="keyword">function</span>(<span class="params">cb</span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.on(CHANGE_EVENT, cb);</div><div class="line">  &#125;,</div><div class="line">  removeChangeListener: <span class="function"><span class="keyword">function</span>(<span class="params">cb</span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.removeListener(CHANGE_EVENT, cb);</div><div class="line">  &#125;,</div><div class="line">  getList: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">return</span> _store.list;</div><div class="line">  &#125;,</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>其中引入<code>events</code>事件机制用于处理<code>store</code>和<code>view</code>之间的事件响应。</p>
<h2 id="Dispatcher"><a href="#Dispatcher" class="headerlink" title="Dispatcher"></a>Dispatcher</h2><p><code>Dispatcher</code>用于创建一种事件注册分发的机制，可以简单理解为pub/sub模式（严格意义上并不完全是）。<code>dispatcher/AppDispatcher.js</code>代码如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> &#123; Dispatcher &#125; <span class="keyword">from</span> <span class="string">'flux'</span>;</div><div class="line"></div><div class="line"><span class="keyword">const</span> AppDispatcher = <span class="keyword">new</span> Dispatcher();</div><div class="line"></div><div class="line">AppDispatcher.handleAction = <span class="function"><span class="keyword">function</span>(<span class="params">action</span>)</span>&#123;</div><div class="line">  <span class="keyword">this</span>.dispatch(&#123;</div><div class="line">    source: <span class="string">'VIEW_ACTION'</span>,</div><div class="line">    action: action</div><div class="line">  &#125;);</div><div class="line">&#125;;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> AppDispatcher;</div></pre></td></tr></table></figure>
<p>注册<code>dispatchers</code>的操作一般放在<code>stores</code>里。在<code>stores/todoStore.js</code>文件中:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">AppDispatcher.register(<span class="function"><span class="keyword">function</span>(<span class="params">payload</span>)</span>&#123;</div><div class="line">  <span class="keyword">var</span> action = payload.action;</div><div class="line">  <span class="keyword">switch</span>(action.actionType)&#123;</div><div class="line">    <span class="keyword">case</span> appConstants.ADD_ITEM:</div><div class="line">      addItem(action.data);</div><div class="line">      todoStore.emit(CHANGE_EVENT);</div><div class="line">      <span class="keyword">break</span>;</div><div class="line">    <span class="keyword">case</span> appConstants.REMOVE_ITEM:</div><div class="line">      removeItem(action.data);</div><div class="line">      todoStore.emit(CHANGE_EVENT);</div><div class="line">      <span class="keyword">break</span>;</div><div class="line">    <span class="keyword">default</span>:</div><div class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</div><div class="line">  &#125;</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h2 id="actions"><a href="#actions" class="headerlink" title="actions"></a>actions</h2><p>action就是我们所要做的动作，在我们的示例中就是添加todo项目和删除todo项目。下发事件（dispatcher）的操作就定义在<code>actions/todoActions.js</code>里：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> AppDispatcher <span class="keyword">from</span> <span class="string">'../dispatcher/AppDispatcher'</span>;</div><div class="line"><span class="keyword">import</span> appConstants <span class="keyword">from</span> <span class="string">'../constants/appConstants'</span>;</div><div class="line"></div><div class="line"><span class="keyword">var</span> todoActions = &#123;</div><div class="line">  addItem: <span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</div><div class="line">    AppDispatcher.handleAction(&#123;</div><div class="line">      actionType: appConstants.ADD_ITEM,</div><div class="line">      data: item</div><div class="line">    &#125;);</div><div class="line">  &#125;,</div><div class="line">  removeItem: <span class="function"><span class="keyword">function</span>(<span class="params">index</span>)</span>&#123;</div><div class="line">    AppDispatcher.handleAction(&#123;</div><div class="line">      actionType: appConstants.REMOVE_ITEM,</div><div class="line">      data: index</div><div class="line">    &#125;)</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> todoActions</div></pre></td></tr></table></figure>
<h2 id="components"><a href="#components" class="headerlink" title="components"></a>components</h2><p>在<code>components</code>中就是我们之前创建的React组件了，需要做的修改就是将states的管理部分代码移到了stores里。因此，对<code>components/ListContainer.js</code>文件作如下修改：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> AddItem <span class="keyword">from</span> <span class="string">'./AddItem'</span>; </div><div class="line"><span class="keyword">import</span> List <span class="keyword">from</span> <span class="string">'./List'</span>; </div><div class="line"><span class="keyword">import</span> todoStore <span class="keyword">from</span> <span class="string">'../stores/todoStore'</span>;</div><div class="line"><span class="keyword">import</span> todoActions <span class="keyword">from</span> <span class="string">'../actions/todoActions'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">ListContainer</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  state = &#123;</div><div class="line">    list: todoStore.getList()</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  componentDidMount = () =&gt; &#123;</div><div class="line">    todoStore.addChangeListener(<span class="keyword">this</span>._onChange);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  componentWillUnmount = () =&gt; &#123;</div><div class="line">    todoStore.removeChangeListener(<span class="keyword">this</span>._onChange);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  handleAddItem = (newItem) =&gt; &#123;</div><div class="line">    todoActions.addItem(newItem);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  handleRemoveItem = (index) =&gt; &#123;</div><div class="line">    todoActions.removeItem(index);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  _onChange = () =&gt; &#123;</div><div class="line">    <span class="keyword">this</span>.setState(&#123;</div><div class="line">      list: todoStore.getList()</div><div class="line">    &#125;)</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render = () =&gt; &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;div className="col-sm-6 col-md-offset-3"&gt;</div><div class="line">        &lt;div className="col-sm-12"&gt;</div><div class="line">          &lt;h3 className="text-center"&gt; Todo List &lt;/h3&gt;</div><div class="line">          &lt;AddItem add=&#123;this.handleAddItem&#125;/&gt;</div><div class="line">          &lt;List items=&#123;this.state.list&#125; remove=&#123;this.handleRemoveItem&#125;/&gt;</div><div class="line">        &lt;/div&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    )</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>其中所有state的状态变化均通过stores来处理。可以看到，在这里<code>handleAddItem</code>和<code>handleRemoveItem</code>分别会触发action里定义的动作，然后就会触发在store里注册好的dispatcher的操作，进而完成对state的更改。<code>_onChange</code>事件通过<code>events</code>事件机制处理store和view间数据的同步。</p>
<p>至此，所有的代码修改完毕，我们可以通过<code>npm start</code>启动应用程序，然后在浏览器中可以通过访问<code>http://localhost:3000/</code>来查看结果了。</p>
<p>具体代码请移步Github：<br><a href="https://github.com/jiji262/react-flux-demo/tree/master/todoApp-flux" target="_blank" rel="external">react-flux-demo/todoApp-flux</a></p>
<h1 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h1><p><a href="https://github.com/facebook/flux" target="_blank" rel="external">flux offical site</a><br><a href="http://facebook.github.io/flux/docs/overview.html" target="_blank" rel="external">flux documentation</a><br><a href="https://facebook.github.io/react/blog/2014/05/06/flux.html" target="_blank" rel="external">Flux: An Application Architecture for React</a><br><a href="http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html" target="_blank" rel="external">The Flux Quick Start Guide</a><br><a href="https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207" target="_blank" rel="external">A cartoon guide to Flux</a><br><a href="http://blog.andrewray.me/flux-for-stupid-people/" target="_blank" rel="external">Flux For Stupid People</a><br><a href="https://github.com/kriasoft/react-starter-kit/issues/22" target="_blank" rel="external">Which Flux implementation should I use?</a><br><a href="https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux" target="_blank" rel="external">Creating A Simple Shopping Cart with React.js and Flux</a><br><a href="https://github.com/ruanyf/extremely-simple-flux-demo" target="_blank" rel="external">ruanyf/extremely-simple-flux-demo</a><br><a href="https://medium.com/@tribou/react-and-flux-for-the-rest-of-us-61f90869d51f#.lpiy12h23" target="_blank" rel="external">Flux: Getting Past the Learning Curve</a><br><a href="https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture" target="_blank" rel="external">Getting To Know Flux, the React.js Architecture</a><br><a href="https://tylermcginnis.com/react-js-tutorial-pt-3-architecting-react-js-apps-with-flux-4657ef831895#.17vrxm44o" target="_blank" rel="external">React.js Tutorial Pt 3: Architecting React.js Apps with Flux.</a></p>

      
    </div>

    <div>
      
        
<div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="/uploads/wechatmp.jpg" alt="令狐葱 wechat" style="width: 200px; max-width: 100%;"/>
    <div>欢迎您扫一扫上面的二维码，订阅我的微信公众号！</div>
</div>


      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div></div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="/uploads/wechatpay.png" alt="令狐葱 WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="/uploads/alipaypay.png" alt="令狐葱 Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag"># 前端</a>
          
            <a href="/tags/React/" rel="tag"># React</a>
          
            <a href="/tags/flux/" rel="tag"># flux</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2016/08/18/ubuntu_1604_web_server_config_LEMP/" rel="next" title="手把手教你从头搭建Web服务器及LEMP环境(使用Ubuntu16.04+Nginx+MySQL+PHP)">
                <i class="fa fa-chevron-left"></i> 手把手教你从头搭建Web服务器及LEMP环境(使用Ubuntu16.04+Nginx+MySQL+PHP)
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/02/19/node-debug-with-chrome/" rel="prev" title="使用Chrome DevTools单步调试node程序">
                使用Chrome DevTools单步调试node程序 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_douban"></a>
  <a class="jiathis_button_renren"></a>
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_kaixin001"></a>
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>

          
          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2016/11/28/introduction-to-react-flux/"
           data-title="手把手教你玩转 React Flux" data-url="http://jiji262.github.io/2016/11/28/introduction-to-react-flux/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.gif"
               alt="令狐葱" />
          <p class="site-author-name" itemprop="name">令狐葱</p>
           
              <p class="site-description motion-element" itemprop="description">去留无意，闲看庭前花开花落；宠辱不惊，漫随天外云卷云舒。</p>
          
        </div>
        <nav class="site-state motion-element">
        
          
            <div class="site-state-item site-state-posts">
              <a href="/">
                <span class="site-state-item-count">9</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">28</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/jiji262" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://twitter.com/linghucong" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                  Twitter
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/jiji262" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#新建React项目"><span class="nav-number">1.</span> <span class="nav-text">新建React项目</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#使用React实现简单的Todo程序（不带flux）"><span class="nav-number">2.</span> <span class="nav-text">使用React实现简单的Todo程序（不带flux）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#ListContainer-组件"><span class="nav-number">2.1.</span> <span class="nav-text">ListContainer 组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#List-组件"><span class="nav-number">2.2.</span> <span class="nav-text">List 组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AddItem-组件"><span class="nav-number">2.3.</span> <span class="nav-text">AddItem 组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#App-js"><span class="nav-number">2.4.</span> <span class="nav-text">App.js</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Flux"><span class="nav-number">3.</span> <span class="nav-text">Flux</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#flux架构的实现"><span class="nav-number">3.1.</span> <span class="nav-text">flux架构的实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#使用flux架构重构Todo程序"><span class="nav-number">4.</span> <span class="nav-text">使用flux架构重构Todo程序</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#目录结构"><span class="nav-number">4.1.</span> <span class="nav-text">目录结构</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Constants"><span class="nav-number">4.2.</span> <span class="nav-text">Constants</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Stores"><span class="nav-number">4.3.</span> <span class="nav-text">Stores</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Dispatcher"><span class="nav-number">4.4.</span> <span class="nav-text">Dispatcher</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#actions"><span class="nav-number">4.5.</span> <span class="nav-text">actions</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#components"><span class="nav-number">4.6.</span> <span class="nav-text">components</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#参考链接"><span class="nav-number">5.</span> <span class="nav-text">参考链接</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">令狐葱</span>
</div>


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  




  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"jiji262"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  













  
  

  

  

  

  


</body>
</html>
